<template>
  <div class="box">
    <view class="my-header-bg">
      <view class="settings-img" @click="goToSetting">
        <!-- <image src="@/static/my/settings.png" style="width: 23px; height: 23px;"></image> -->
        <t-image
          class="img"
          :src="settingImg"
          :style="{ width: '23px', height: '23px' }"
        ></t-image>
        <!-- <image src="@/static/my/point.png" class="point" style="width: 10px; height: 10px;"></image> -->
      </view>
    </view>
    <view class="my-box">
      <view class="user-box">
        <view class="basicbox" @click="goToBasicInfo">
          <!-- <image class="avatar" src="/static/my/user-head.png"></image> -->
          <t-image class="avatar" :src="userInfo?.avatar"></t-image>
          <view class="infobox">
            <text class="name">{{ userInfo?.userName }}</text>
            <text class="id">ID:{{ userInfo?.userId }}</text>
          </view>
          <view class="right">
            <!-- <up-icon name="arrow-right" color="#D9D9D9" size="20"></up-icon> -->
          </view>
        </view>

        <view class="number-box">
          <view class="item">
            <text class="number">{{ userInfo?.money }}</text>
            <text class="text">我的金币</text>
          </view>

          <view class="item">
            <text class="number">{{ userInfo?.integral }}</text>
            <text class="text">我的积分</text>
          </view>

          <view class="item">
            <text class="number">{{ userInfo?.todayIntegral }}</text>
            <text class="text">今日积分</text>
          </view>

          <view class="item">
            <text class="number">{{ userInfo?.todayDuration }}</text>
            <text class="text">今日阅读(分钟)</text>
          </view>
        </view>
      </view>
      <!-- <MySwiper classify="2" class="swbox" /> -->
      <Swiper
        :height="swiperHeight"
        :list="bannaList"
        :aspectRatiodate="aspectRatiodate"
        :autoplayDate="swiperAutoplay"
      ></Swiper>

      <!-- <view :class="['message-box', app.globalData?.messageCount > 0 && ' message-box-active']" @click="goToMessage">
				<view class="title-box">
					<text class="msg-text">我的消息</text>
					<up-badge max="99" :value="app.globalData?.messageCount" style="margin-top: -5rpx;"></up-badge>
				</view>
				<text class="msg-info">
					{{lastMessage?.message?.content}}
				</text>
			</view> -->
      <view class="actionbox">
        <view class="item" @click="goToOpinion">
          <t-image class="img" :src="b2"></t-image>
          <text class="text">意见反馈</text>
        </view>
        <view class="item" @click="goToBusiness">
          <t-image class="img" :src="b4"></t-image>
          <text class="text">商务合作</text>
        </view>
        <view class="item" @click="showCode">
          <t-image class="img" :src="b6"></t-image>
          <text class="text">填兑换码</text>
        </view>
        <view class="item" @click="goToCommunity">
          <t-image class="img" :src="b5"></t-image>
          <text class="text">关注我们</text>
        </view>
      </view>

      <view class="my-bottom">
        <!-- <image src="@/static/my/my-bottom-logo.png" style="width: 300rpx; height: 23px;"></image> -->
        <t-image
          :src="bottomLogo"
          :style="{ width: '150px', height: '23px' }"
        ></t-image>
      </view>
      <t-dialog
        v-model:visible="show"
        :close-on-overlay-click="false"
        title="填写兑换码"
      >
        <div class="pd20">
          <t-input
            class="input"
            placeholder="请输入兑换码"
            borderless
            v-model="code"
            align="center"
          ></t-input>
          <div class="btn-box">
            <div class="btn cancal" @click="show = false">取消</div>
            <div class="btn sure" @click="onSubmitCode">确定</div>
          </div>
        </div>
      </t-dialog>
      <TabBar></TabBar>
    </view>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Toast } from "tdesign-mobile-vue";
import TabBar from "@/components/tabBar";
import Swiper from "@/components/Swiper";
import myApi from "@/api/myApi";
import adApi from "@/api/adApi";
import b2 from "@/assets/my/my-b2.png";
import b4 from "@/assets/my/my-b4.png";
import b6 from "@/assets/my/my-b6.png";
import b5 from "@/assets/my/my-b5.png";
import settingImg from "@/assets/my/settings.png";
import bottomLogo from "@/assets/my/my-bottom-logo.png";

const router = useRouter();
const userInfo = ref({});
const show = ref(false);
const swiperAutoplay = ref(false);
const code = ref(""); // 兑换码
const bannaList = ref([]);
let poll = null;
const lastMessage = ref({});
const lastMessageId = ref(0);
const swiperHeight = ref(103);
const aspectRatiodate = ref("1 / 0.254"); //swiper宽高比
// const app = getApp();

//提交兑换码
async function onSubmitCode() {
  show.value = false;
  if (code.value) {
    const result = await myApi.bindInviterCode(code.value);
    Toast(result.msg);
    getUserInfo();
  } else {
    Toast("请输入兑换码");
  }
}

// 点击填兑换码
const showCode = () => {
  show.value = !show.value;
};

// 跳转到设置页
const goToSetting = () => {
  router.push({
    name: "setting",
  });
};

// 跳转到漫友社区
const goToCommunity = () => {
  router.push({
    name: "jionus",
  });
};
// 跳转到意见反馈
function goToOpinion() {
  router.push({
    name: "createOpinion",
  });
}
// 跳转到商务合作
const goToBusiness = () => {
  router.push({
    name: "cooperation",
  });
};

// 点击头像
const goToBasicInfo = () => {
  // uni.navigateTo({
  // 	url: "/pages/my/basicInfo"
  // })
};

// 跳转消息中心
const goToMessage = () => {
  // uni.navigateTo({
  // 	url: "/pages/my/message/index"
  // })
};

// 查询用户信息
const getUserInfo = async () => {
  const result = await myApi.selectUserById();
  userInfo.value = result.data;
  localStorage.setItem("userInfo", JSON.stringify(result.data));
};

// 查询我的消息
const getMessage = async () => {
  // const app = getApp();
  const result = await myApi.userMessage({
    pageNum: 1,
    listLimit: 100,
  });
  const records = result.data.records;
  const messageData = records.filter((item) => item.isRead === 0);
  lastMessage.value = messageData[0];
  // app.globalData.messageCount =messageData.length;
  // if(app.globalData.messageCount > 0){
  // 	// uni.showTabBarRedDot({
  // 	// 	index: 4, // 第几个tab，从0开始
  // 	// });
  // }else{
  // 	// uni.hideTabBarRedDot({
  // 	// 	index:4
  // 	// })
  // }
};

const getBannaData = async () => {
  const result = await adApi.list();
  localStorage.setItem("ad", JSON.stringify(result.data));
  const storedAdStr = localStorage.getItem("ad"); // 读取字符串
  const storedAd = storedAdStr ? JSON.parse(storedAdStr) : []; // 转数组，无数据时兜底空数组
  const d = storedAd.filter((item) => item.position === "underVip"); // 过滤数据
  // const d = JSON.parse(uni.getStorageSync("ad")).filter((item) => item.position === "underVip");
  bannaList.value = d;
};
onMounted(() => {
  getUserInfo();
  getMessage();
  getBannaData();
});
</script>

<style>
page {
  background: #f5f5f5;
}
.t-dialog__content {
  background-image: none !important;
}
.t-dialog__footer {
  padding-bottom: 10px !important;
}
.t-dialog__header {
  padding-top: 10px;
}
</style>

<style lang="scss" scoped>
.pd20 {
  padding: 20px;
  padding-bottom: 0;
}
.box {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
}
.my-header-bg {
  width: 100%;
  height: 240px;
  display: inline-block;
  // background: url("@/assets/my/my-bg.png");
  background-image: url("../../assets/my/my-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-top: var(--status-bar-height);
  // position: relative;

  .settings-img {
    position: absolute;
    right: 22.5px;
    top: var(--status-bar-height);
    padding-top: 10px;

    .point {
      position: absolute;
      right: -5px;
      top: 10px;
    }
  }
}

.my-box {
  display: flex;
  flex-direction: column;
  padding: 0 15px;
  margin-top: -50px;

  .user-box {
    width: 100%;
    background: $b-color;
    border-radius: 10px;
    margin-bottom: 15px;
    .basicbox {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 10px;
      position: relative;

      .avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }

      .infobox {
        padding-left: 6px;
        display: flex;
        flex-direction: column;
        text-align: left;

        .name {
          color: #000;
          font-size: 18px;
          font-style: normal;
          font-weight: 500;
        }

        .id {
          color: #6c6c6c;
          font-size: 14px;
          font-weight: 550;
          margin-top: 5px;
        }
      }

      .right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
    }

    .number-box {
      display: flex;
      padding: 10px;
      justify-content: space-evenly;

      .item {
        display: flex;
        flex-direction: column;

        .number {
          color: #101010;
          text-align: center;
          font-size: 20px;
          font-style: normal;
        }

        .text {
          color: #6c6c6c;
          font-size: 14px;
          font-style: normal;
          margin-top: 4px;
        }
      }
    }
  }

  .swbox {
    margin-top: 10px;
    border-radius: 10px !important;
  }

  .actionbox {
    display: flex;
    background: #fff;
    border-radius: 10px;
    margin-top: 15px;
    padding: 15px 0;
    justify-content: space-around;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .img {
        width: 23px;
        height: 23px;
      }

      .text {
        color: #6c6c6c;
        font-size: 14px;
        font-weight: 550;
        margin-top: 8px;
      }
    }
  }

  .my-bottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 23px;
  }

  .message-box {
    margin-top: 10px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    padding: 8px;
    flex-direction: column;
    padding: 8px;

    .title-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      .msg-text {
        color: #101010;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        margin-right: 6px;
      }
    }

    .msg-info {
      margin-top: 8px;
      color: #6c6c6c;
      font-size: 12px;
      font-style: normal;
      font-weight: 500;
      /* 必须使用弹性盒子布局 */
      display: -webkit-box;
      /* 限制显示的行数 */
      -webkit-line-clamp: 2;
      /* 垂直方向排列 */
      -webkit-box-orient: vertical;
      /* 超出部分隐藏 */
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .message-box-active {
    border: 1rpx solid #ff5959;
    background: linear-gradient(180deg, #ffd3d3 0%, #fff 44.5%);
  }
}
.input {
  border: 1px solid rgba(220, 220, 220, 1);
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}
.btn-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  .btn {
    width: 46%;
    height: 40px;
    line-height: 40px;
    border-radius: 50px;
    font-size: 16px;
    text-align: center;
    &.cancal {
      color: #6c6c6c;
      border: 0.5px solid #d9d9d9;
    }
    &.sure {
      color: #101010;
      font-weight: 750;
      background: linear-gradient(90deg, #fdda28 0%, #f1b444 100%);
    }
  }
}
</style>
